<template>
	<div>
		<van-nav-bar :title="route.meta.title" left-arrow @click-left="routerBack" />
		<van-cell-group>
			<van-cell title="头像">
				<label for="file">
					<van-image width="30" height="30" :src="_userInfo.avatar" />
				</label>
				<input type="file" id="file" hidden @change="uploadImg" />
			</van-cell>
			<van-cell title="昵称">
				<template #right-icon>
					<van-field v-model="_userInfo.nickname" style="text-align: right;" placeholder="请输入用户名" />
				</template>
			</van-cell>
			<van-cell title="国家" is-link to="/country">
				{{country}}
			</van-cell>
			<van-cell title="地址" is-link @click="showPopup">
				{{_userInfo.addr}}
			</van-cell>

			<van-cell title="生日" is-link @click="showDatePopup">

				{{_userInfo.birthday}}
			</van-cell>
		</van-cell-group>


		<van-button size="large" @click="submit">确定</van-button>




		<!-- ====================================================	 -->
		<!--  地址弹出 -->
		<van-popup v-model:show="show" position="bottom" :style="{ height: '50%',width:'100%' }">
			<van-area v-model="addr_code" title="标题" :area-list="areaList" @cancel="cancel" @confirm="confirm" />
		</van-popup>

		<!-- 日期弹出 -->
		<van-popup v-model:show="dateShow" position="bottom">

			<van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate"
				@confirm="datecConfirm" @cancel="hideDatePopup" />


		</van-popup>


	</div>
</template>

<script setup>
	import {
		areaList
	} from '@vant/area-data'; //   地址数据  
	import {
		upload
	} from '@/utils/upload'

	import {
		editUserInfo,
		getuserInfo
	} from '@/api/user'

	import {
		useRoute,
		useRouter
	} from "vue-router"
	import {
		toRefs,
		ref
	} from "vue"
	import useUserStore from "@/store/userStore"; //  pinia

	import useAvatar from './useAvatar';
	import useAddr from './useAddr';
	import useDate from './useDate';
	import {
		showToast
	} from 'vant';
	const route = useRoute();
	const router = useRouter();
	let {
		userInfo,
		uploadUserInfo,

	} = toRefs(useUserStore()); //  仓库 数据  


	//  做一下真正仓库(pinia仓库)的解耦
	const _userInfo = ref({
		...userInfo.value
	})

	//  上传头像的

	let {
		uploadImg
	} = useAvatar(_userInfo)

	//  地址
	let {
		show,
		showPopup,
		hidePopup,
		confirm,
		cancel,
		addr_code
	} = useAddr(_userInfo)
	//  国家
	let country = ref('中国')
	let _country = sessionStorage.getItem('country')

	if (_country) {
		country.value = _country
	}

	//  日期

	let {
		showDatePopup,
		hideDatePopup,
		datecConfirm,
		dateShow,
		minDate,
		maxDate,
		currentDate
	} = useDate(_userInfo);


	function submit() {

		// console.log(nickname,addr,addr_code,birthday)

		let {
			nickname,
			addr,
			addr_code,
			birthday
		} = _userInfo.value;
		
		
		let info  = {
			
		}
		
		// _userInfo.value  userInfo.value
		
		Object.keys(_userInfo.value).forEach(function(v,k,arr){
			
			
			// console.log( v  :   _userInfo.value[v])
			
			if(userInfo.value[v] !== _userInfo.value[v]){
				// console.log(_userInfo.value[v] +'：'+v)
				
				info[v] = _userInfo.value[v]
			}
			
		})
		
		
		// console.log(info)
		
		if(Object.keys(info).length === 0){
			
			showToast('您未修改任何数据')
			return 
		}
		
	
		editUserInfo(info).then(res => {
			console.log(res)

			//     第一种写法    再次获取

			// if (res.code === 0) {

			// 	getUser().then(res => {

					// showToast('修改成功')

					// setTimeout(() => {
					// 	router.go(-2)
					// }, 1000)
			// 	})

			// }
			
			
				//     第2种写法  
			if(res.code === 0){
				// 前端覆盖
				uploadUserInfo.value({
					..._userInfo.value
				});
				
				showToast('修改成功')
				
				setTimeout(() => {
					router.go(-2)
				}, 1000)
				
			}


		})
	}


	// function getUser() {

	// 	return getuserInfo().then(res => {
	// 		uploadUserInfo.value(res.userInfo)
	// 	})
	// }
</script>

<style>
</style>